<template>
  <cv-dialog-form
    v-model:show="show"
    title="更新用户"
    @confirm="updateUserInfo"
  >
    <cv-form :config="form" :data="formData"> </cv-form>
  </cv-dialog-form>
</template>
<script setup lang="ts">
import type { FormConfig } from '@/packages/components'
import { addReq, queryReq, pageQueryReq, updateReq } from '@/utils/http/code'
import { useVModels } from '@vueuse/core'
import useVisible from '@/hooks/useVisible'
import {
  DepTreeType,
  getDepTree,
  getRoleSelect,
  getUserList,
  updateUserDetail,
  RoleSelectType,
  UpdateUserInfoType,
  UserDetailType,
} from '@/api/system/system-user'
import { PropType } from 'vue'
import { isArray } from 'lodash-es'
const emit = defineEmits(['update:show', 'refreshTable'])
const props = defineProps({
  /**
   * 是否显示弹窗
   */
  show: {
    type: Boolean,
    default: false,
  },
  userDetail: {
    type: Object as PropType<UserDetailType>,
    default: () => {
      return {}
    },
  },
})

const { userDetail } = toRefs(props)

const { show } = useVModels(props)

const a = reactive([1, 2])

const cascaderProps = {
  value: 'id',
  label: 'name',
}

/**
 * 更新数据
 */
const updateUserInfo = async (data: UpdateUserInfoType, close: Function) => {
  const res = await updateUserDetail(data)
  console.log(res)
  updateReq(res, () => {
    close()
    emit('refreshTable')
  })
  console.log(formData, '1111111')
}
const formData = reactive<UpdateUserInfoType>({
  id: userDetail.value.id,
  avatar: userDetail.value.avatar,
  nickname: userDetail.value.nickname,
  phone: userDetail.value.phone,
  state: userDetail.value.state,
  depIds: userDetail.value.depId,
  rids: userDetail.value.roIds,
})

/**
 *数据添加
 */
const form = reactive<FormConfig<UpdateUserInfoType>>({
  items: [
    {
      type: 'image-upload',
      prop: 'avatar',
      label: '用户头像',
      rules: {
        required: false,
      },
    },
    {
      type: 'input',
      prop: 'nickname',
      label: '用户名称',
      width: 300,
      rules: [
        {
          required: true,
        },
        {
          max: 11,
          message: '昵称长度最多10位',
        },
      ],
    },
    {
      type: 'input',
      prop: 'phone',
      label: '手机号',
      rules: {
        required: true,
        type: 'pattern',
        pattern: /^1[3-9][0-9]{9}$/,
        message: '手机号码格式错误',
      },
    },
    {
      type: 'switch',
      prop: 'state',
      label: '状态',
      rules: { required: false },
    },
    {
      type: 'cascader',
      prop: 'depIds',
      label: '部门名称',
      rules: {
        required: false,
      },
      cascader: {
        props: {
          value: 'id',
          label: 'name',
        },
        initData: async ({ setData }) => {
          const res = await getDepTree()
          setData(res.data)
        },
        change: (e) => {
          if (isArray(e)) {
            formData.depIds = e[e.length - 1] as any
          }
        },
      },
    },

    {
      type: 'select',
      prop: 'rids',
      label: '角色',
      select: {
        label: 'roleName',
        value: 'roleId',
        //select多选
        multiple: true,
        //select最多只能选择3个
        multipleLimit: 3,
        //自定义加载数据
        initData: async ({ setData }) => {
          const res = await getRoleSelect()

          setData(res.data)
        },
      },
    },
  ],
})
</script>
<style lang="scss" scoped></style>
